<template>
  <div class="swiper">
    <swiper
      :indicator-dots="true"
      indicator-color="#4dc3f3"
      :autoplay="true"
      :interval="6000"
      :duration="1000"
      :circular="true"
    >
      <div :key="index" v-for="(item,index) in imgUrls">
        <swiper-item>
          <img
            @click="bookDetail(img)"
            class="slide-image"
            mode="aspectFit"
            v-for="(img,imgIndex) in item"
            :key="imgIndex"
            :src="img.image"
          />
        </swiper-item>
      </div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: ["banners"],
  computed: {
    imgUrls() {
      // 如果通用 请用chunk函数  比如lodash的chunk方法
      let res = this.banners;
      return [res.slice(0, 3), res.slice(3, 6), res.slice(6)];
    }
  },
  mounted() {}
};
</script>

<style>
.swiper {
  margin-top: 10px;
}
.slide-image {
  width: 33%;
  height: 250rpx;
}
</style>